<template>
    <mobile-top-menu :data="menuData"></mobile-top-menu>
    <div class="author-detail">
        <div class="a-d-top">
            <div class="a-d-name">
                <h1>{{ authorInfo.a_name }}</h1>
            </div>
            <div class="a-d-dynasty">
                [{{ authorInfo.d_name }}] {{ authorInfo.a_time }}
            </div>
            <div class="a-d-synopsis">
                <h2>简介</h2>
                <div class="s-content" v-html="authorInfo.a_synopsis"></div>
            </div>
        </div>
        <div class="a-d-poetry" v-if="poetryList.length != 0">
            <div class="md-b-top">
                <ul class="md-b-nar">
                    <li>作品</li>
                </ul>
            </div>
            <ul class="md-b-ul">
                <li class="md-b-li" v-for="item in poetryList" :key="item.pid" @click.prevent="goToPoetryDetail(item.pid)">
                    <div class="li-top f-b-r">
                        <div class="l-title ellipsis">{{ item.p_title }}</div>
                        <div class="l-dynasty">[{{ item.p_dynasty }}]&nbsp;{{ item.a_name }}</div>
                    </div>
                    <div class="l-content ellipsis">{{ item.p_content.split('。')[0] }}。</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue"
import { useRoute, useRouter } from 'vue-router'
import findStore from '../find.store'

const findSe = findStore()
const route = useRoute()
const router = useRouter()
const menuData = computed(() => {
    return {
        leftMsg: '返回'
    }
})

// 根据id获取作者及作品信息
let authorId = route.params.authorId
let authorInfo = ref<any>({})
let poetryList = ref<any>([])
const getAuhtorDetail = () => {
    const data = {
        authorId: authorId
    }
    findSe.getAuthorAndPoetryById(data).then((res: any) => {
        if(res.status == 'success') {
            authorInfo.value = res.results.author
            poetryList.value = res.results.poetry
        }
    })
}

// 跳转诗歌详情
const goToPoetryDetail = (pid: number) => {
    router.push({ 
        name: 'poetryDetail',
        params: {
            id: pid
        }
    })
}

onMounted(() => {
    getAuhtorDetail()
})
</script>

<style lang="less" scoped>
.author-detail {
    width: 100vw;
    background-color: var(--bg-color);
    // background-color: red;
    min-height: calc(100vh - 2.5rem);
    .a-d-top {
        padding: 0 1rem;
        .a-d-name {
            height: 3rem;
            line-height: 3rem;
            padding-top: 0.75rem;
            h1 {
                font-size: 24px;
                color: var(--font-color-black);
            }
        }
        .a-d-synopsis {
            margin-top: 0.5rem;
            h2 {
                font-size: 18px;
                color: var(--font-color-red);
                height: 2.5rem;
                line-height: 2.5rem;
            }
            .s-content {
                white-space: pre-wrap;
                color: var(--font-color-black);
            }
        }
    }
    .a-d-poetry {
        margin-top: 1rem;
        margin-bottom: 3rem;
        .md-b-top {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: 1px solid var(--border-color-gray1);
            border-top: 1px solid var(--border-color-gray1);
            .md-b-nar {
                li {
                    color: var(--content-font-color);
                    width: 50%;
                    height: 100%;   
                    text-align: center;
                    font-weight: 600;
                }
            }
        }
        .no-data {
            height: 100%;
            width: 100%;
            text-align: center;
            margin-top: 5rem;
            font-size: 16px;
            color: var(--content-font-color);
        }
        .md-b-ul {

            .md-b-li {
                padding: 0.75rem;
                box-sizing: border-box;
                border-bottom: 1px solid var(--border-color-gray1);
                .li-top {
                    height: 2rem;
                    width: 100%;
                    .l-title {
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--font-color-black);
                    }
                    .l-dynasty {
                        color: var(--font-color-gray);
                    }
                    .l-content {
                        color: var(--font-color-gray);
                    }
                }

            }
        }
    }
}
</style>